<template>
  <div id="actionFile">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      label-width="100px"
      class="addForm"
    >
      <el-form-item label="活动分类" prop="classify">
        <el-input
          v-model="ruleForm.classify"
          disabled
          placeholder="官方征集活动"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="活动名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入活动名称"
          maxlength="40"
          show-word-limit
          :disabled="!canEdit"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="活动描述" prop="describe">
        <el-input
          v-model="ruleForm.describe"
          type="textarea"
          placeholder="请输入活动描述"
          maxlength="300"
          show-word-limit
          :disabled="!canEdit"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="ruleForm.remark"
          type="textarea"
          placeholder="请输入活动用户的描述"
          maxlength="300"
          show-word-limit
          :disabled="!canEdit"
        ></el-input>
      </el-form-item>
    </el-form>
    <div v-if="showBtn" class="btn-box">
      <el-button plain @click="cancelLabel">
        取 消
      </el-button>
      <el-button
        type="success"
        :loading="loading"
        @click="confirmLabel('ruleForm')"
      >
        保存
      </el-button>
      <el-button type="primary" @click="nextLab('actionShow')">
        下一步
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveActivities } from '@/api/activeManagement/templatePage' // 接口
import { clearTagMixins } from '@/mixins/clearTag'
export default {
  name: 'actionFile',
  msg: '官方征集自评活动-活动档案',
  mixins: [clearTagMixins],
  props: ['type', 'subData', 'backPage', 'id'],
  data() {
    return {
      loading: false,
      ruleForm: {
        classify: '' //活动类型对应中文
        /*type: '', //活动类型 OFFICIAL_SELF_JUDGE_ACTIVITY：官方自评活动；QUESTIONNAIRE_ACTIVITY：调查问卷活动；VOTE_ACTIVITY：投票活动;BELOW_THE_LINE_ACTIVITY：线下汇报活动;RANKING_LIST_ACTIVITY：排行榜活动
          name: '', // 活动名称
         describe: '', // 活动描述
         remark: '', // 备注
         source: 'OTHER' //活动来源OTHER写死*/
      },
      actionText: {
        OFFICIAL_SELF_JUDGE_ACTIVITY: '官方自评活动',
        QUESTIONNAIRE_ACTIVITY: '调查问卷活动',
        VOTE_ACTIVITY: '投票活动',
        BELOW_THE_LINE_ACTIVITY: '线下汇报活动',
        RANKING_LIST_ACTIVITY: '排行榜活动'
      },
      canEdit: true,
      isSave: false //是否保存
    }
  },
  computed: {
    showBtn() {
      //是否显示保存按钮
      return this.type === 'add' || this.type === 'edit'
    }
  },
  watch: {
    subData(newV) {
      if (newV.activityAuditing) {
        this.getCanEdit()
      }
      this.ruleForm = newV.activityInfo
      this.ruleForm.classify = this.actionText[this.ruleForm.type]
    }
  },
  mounted() {},
  methods: {
    getCanEdit() {
      this.canEdit =
        (this.type === 'add' || this.type === 'edit') &&
        this.subData.activityAuditing.twoAuditing.auditingState !== 'PASS'
    },
    resetIsSave() {
      this.isSave = false
    },
    /*取消*/
    cancelLabel() {
      if (this.isSave) {
        //clearTagMixins
        this.clearTag()
      } else {
        this.$confirm(
          '您的信息尚未保存，取消后所填写的信息将不被保存，确定要退出？',
          '提示',
          {
            distinguishCancelAndClose: true,
            confirmButtonText: '保存后退出',
            cancelButtonText: '直接退出',
            type: 'warning'
          }
        )
          .then(() => {
            this.confirmLabel().then((response) => {
              this.clearTag()
            })
          })
          .catch((action) => {
            if (action === 'cancel') {
              this.clearTag()
            }
          })
      }
    },
    /*退出*/
    signOut() {
      this.$router.go(-1)
    },
    /*保存*/
    confirmLabel() {
      let _this = this
      return new Promise((resolve, reject) => {
        _this.loading = true
        let activityInfo = { ..._this.ruleForm }
        delete activityInfo.classify
        saveActivities(
          _this.id,
          { activityInfo },
          (response) => {
            _this.$message.success('保存成功')
            _this.loading = false
            _this.isSave = true
            resolve(true)
          },
          (response) => {
            _this.$message.warning(response.message)
            _this.loading = false
            reject()
          }
        )
      })
    },
    /*下一步*/
    nextLab(labName) {
      this.confirmLabel().then((response) => {
        this.$emit('changeLab', labName)
      })
    }
  }
}
</script>

<style lang="less">
#actionFile {
  .el-textarea__inner {
    height: 100px;
  }
  .el-input__inner {
    padding-right: 75px;
  }
}
</style>
